<template>
  <el-row :gutter="10">
    <el-col :span="5" class="example-pagination-block">
      <el-input
        v-model="searchRoute"
        placeholder="Search Route"
        @change="searchFor()"
      />
    </el-col>
    <el-col :span="5" class="example-pagination-block">
      <el-input
        v-model="searchPrice"
        placeholder="Search Price"
        @change="searchFor()"
      />
    </el-col>
    <el-col :span="5" class="example-pagination-block">
      <el-input
        v-model="searchStroce"
        placeholder="Search Stroce"
        @change="searchFor()"
      />
    </el-col>
    <el-col :span="5" class="example-pagination-block">
      <el-input
        v-model="searchDepartTime"
        placeholder="Search DepartTime"
        @change="searchFor()"
      />
    </el-col>
  </el-row>
  <el-table :data="tableData" style="width: 100%">
    <!-- <el-table-column type="selection" width="55" /> -->
    <!-- <el-table-column prop="id" sortable label="Id" width="120" /> -->
    <el-table-column prop="descrip" show-overflow-tooltip label="Descrip" />
    <el-table-column
      prop="price"
      show-overflow-tooltip
      sortable
      label="Price"
    />
    <el-table-column
      prop="store"
      show-overflow-tooltip
      sortable
      label="Store"
    />
    <el-table-column prop="departTime" sortable label="DepartTime" />
    <el-table-column label="Descrip">
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleEdit(scope.$index, scope.row)"
          >购买</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="8" :offset="8" class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :total="totalCnt"
        background
        :pager-count="5"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const multipleSelection = ref<User[]>([]);
const curIndex = ref<number>(1);
interface User {
  id: string;
  date: string;
  name: string;
  address: string;
}
onMounted(() => {
  axios
    .get("http://localhost:9090/trainT/getTicketsByPages")
    .then((response) => {
      tableData.value = response.data.records;
      totalCnt.value = response.data.pages * 10;
    });
});
const router = useRouter();
const tableData = ref([]);

const searchRoute = ref("");
const searchPrice = ref("");
const searchStroce = ref("");
const searchDepartTime = ref("");

const searchFor = () => {
  axios({
    method: "GET",
    url: "http://localhost:9090/trainT/getTicketsByPages",
    params: {
      cur: 1,
      descrip: searchRoute.value,
      price: searchPrice.value,
      store: searchStroce.value,
      departTime: searchDepartTime.value,
    },
  }).then((response) => {
    tableData.value = response.data.records;
    totalCnt.value = response.data.pages * 10;
  });
};

const handleEdit = (index: number, row: User) => {
  // console.log(row.id);
  // 编辑按钮
  axios({
    method: "GET",
    url: "http://localhost:9090/trainT/handleTickets",
    params: {
      cur: curIndex.value,
      id: row.id,
    },
  }).then((response) => {
    tableData.value = response.data.records;
    totalCnt.value = response.data.pages * 10;
  });
  // console.log(router.currentRoute.value.query.data);
};
const totalCnt = ref(50);
const handleCurrentChange = (val: number) => {
  curIndex.value = val;
  // 分页条
  axios({
    method: "GET",
    url: "http://localhost:9090/trainT/getTicketsByPages",
    params: {
      cur: curIndex.value,
      descrip: searchRoute.value,
      price: searchPrice.value,
      store: searchStroce.value,
      departTime: searchDepartTime.value,
    },
  }).then((response) => {
    tableData.value = response.data.records;
    totalCnt.value = response.data.pages * 10;
  });
};
</script>

<style scoped>
.example-pagination-block {
  margin-top: 10px;
}
</style>
